<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #f8f9fc;
		}

		* {
			margin: 0;
			padding: 0;
		}

		p,
		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		dl,
		dt,
		dd,
		ol,
		ul,
		li {
			margin: 0px;
			padding: 0px;
		}

		li {
			list-style: none;
		}

		a {
			text-decoration: none;
			color: #000;
		}

		img {
			display: block;
		}

		input {
			border: none;
		}

		.fl {
			float: left;
		}

		.fr {
			float: right;
		}

		.clearFixed:after {
			content: "";
			display: block;
			clear: both;
		}

		.btnRed:after {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			bottom: -2px;
			margin-left: -10px;
			border: 10px solid transparent;
			border-bottom-color: #fff;
		}

		.btnWhit:before {
			content: "";
			display: block;
			position: absolute;
			left: 50%;
			bottom: 0px;
			margin-left: -10px;
			border: 10px solid transparent;
			border-bottom-color: #00b38a;
		}

		.header {
			height: 360px;
			background: #00b38a;
		}

		.boxCon {
			position: absolute;
			top: 77px;
			left: 50%;
			margin-left: -325px;
			width: 700px;
			height: 490px;

		}

		.boxCon .logo {
			height: 77px;
			background: url("./img2/logo1.jpg")no-repeat;
		}

		.boxCon .forBox {
			height: 400px;
			border: 1px solid #dce1e6;
			padding: 6px;
			background: #fff;
		}

		.boxCon .forBox .imgBox img {
			margin-right: 6px;
		}

		.boxCon .forBox .imgBox img:nth-child(2) {
			margin-top: -5px;
		}

		.boxCon .forBox .inpLeft {
			position: relative;
			width: 290px;
			height: 277px;
			padding: 0px 63px;
			border-right: 1px dashed #555;
		}

		.boxCon .forBox .inpLeft .or {
			position: absolute;
			width: 18px;
			height: 18px;
			right: -8px;
			top: 50%;
			margin-top: -9px;
			background: #fff;
			text-align: center;
			color: #555;
		}

		.boxCon .forBox .inpLeft .line1 {
			height: 40px;
			border-bottom: 1px solid #555;
			font-size: 18px;
			color: #555;
			line-height: 40px;
		}

		.boxCon .forBox .inpLeft .line1 p {
			width: 145px;
			text-align: center;
			position: relative;
		}

		.boxCon .forBox .inpLeft .line1 p:nth-child(1) {
			color: #00B38A;
			border-bottom: 1px solid #00b38a;
		}

		.boxCon .forBox .inpLeft .lineInp {
			height: 64px;
			border-bottom: 1px solid #555;
		}

		.boxCon .forBox .inpLeft .lineInp input {
			width: 200px;
			height: 44px;
			padding-top: 20px;
			outline: none;
		}

		.boxCon .forBox .inpLeft .txt {
			color: #00B38A;
			height: 58px;
			line-height: 58px;
			font-size: 12px;
			text-align: right;
		}

		.boxCon .forBox .inpLeft input[type="submit"] {
			height: 48px;
			width: 100%;
			background: #00B38A;
			/* color:#fff; */
			text-align: center;
			line-height: 48px;
			font-size: 18px;
		}

		.boxCon .forBox .inpRight {
			padding-left: 52px;
			color: #555;
			font-size: 14px;
			padding-top: 80px;
		}

		.boxCon .forBox .inpRight .txt2 {
			font-size: 16px;
			color: #00b38a;
			margin-bottom: 44px;
			height: 30px;
			line-height: 30px;
		}

		.boxCon .forBox .inpRight .txt2 img {
			display: inline-block;
			margin-left: 3px;
			vertical-align: middle;
		}

		.boxCon .forBox .inpRight .txt3 img {
			margin-right: 24px;
			margin-top: 10px;
		}

		.verifyCode {
			display: inline-block;
			width: 50px;
			height: 20px;
			border: 1px solid black;
		}

		.boxCon .forBox .inpLeft .lineInp .sendText {
			width: 110px;
			height: 44px;
			padding-top: 20px;
			outline: none;
		}
		.verifyCode {
            display: inline-block;
            width: 50px;
            height: 20px;
            border: 1px solid black;
        }

	</style>
</head>

<body>
	<div class="header"></div>
	<div class="boxCon">
		<div class="logo"></div>
		<!-- 禁止form表单提交 onsubmit="return false" -->
		<form action="#" method="get" onsubmit="return false">
			<div class="forBox">
				<div class="imgBox clearFixed">
					<!-- <img class="fl" src="img2/qrcode-normal.svg" alt="" /> -->
					<!-- <img class="fl" src="img2/wx-login.svg" alt="" /> -->
				</div>
				<div class="inpLeft fl">
					<div class="line1">
						<p class="txtP1 fl btnRed btnWhit">登录</p>
						<!-- <p class="txtP2 fl">验证码登录</p> -->
					</div>
					<div class="lineInp">
						<input type="text" placeholder="请输入常用手机号" />
						<span></span>
					</div>
					<div class="lineInp">
						<input type="password" placeholder="密码长度不得小于六位" />
						<span></span>
					</div>
					<!-- <div class="lineInp">
						<input type="text" class="sendText" placeholder="请输入短信验证码" />
						<span class="verifyCode"></span>
						<button class="send" disabled>发送验证码</button>
					</div> -->
					<a href="forgetpwd.html">忘记密码?</a>
					<input type="submit" value="登录" disabled />
					<span class="title" style="color:red"></span>
					<span class="or">or</span>
				</div>
				<div class="inpRight fl">
					<div class="txt1">还没有账号</div>
					<div class="txt2"><a href="regist.html">立即注册<img src="img2/icon-arrow-right.png" alt="" /></a></div>
					<div class="txt3">
						<p>使用第三方账号直接登录</p>
						<img class="fl" src="img2/icon-sina1.png" alt="" />
						<img class="fl" src="img2/icon-wechat.png" alt="" />
						<img class="fl" src="img2/icon-tencent.png" alt="" />
						<img class="fl" src="img2/icon-baidu.png" alt="" />
					</div>
				</div>

			</div>
		</form>
	</div>

</body>

</html>
<script src="./js/common.js"></script>

<script src="./js/axios.min.js"></script>
<script src="./js/login.js"></script>